import { View, Button, Text, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import * as T from '../types';
import './homepageNav.less';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';

type IHomepageNavProps = T.IProps & T.IHomepageNavProps;
//@ts-ignore
@connect<Partial<IHomepageNavProps>, T.IHomepageNavState>(store2Props, actions)
export default class Info extends Component<Partial<IHomepageNavProps>, T.IHomepageNavState> {
  constructor(props: IHomepageNavProps) {
    super(props);
    this.state = {};
  }


  renderToolsBox() {
    let tabList = [
      {
        name: '家庭保洁',
        iconUrl: "https://img.daoway.cn/img/icon/circle/baojie.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=20&title=%E5%AE%B6%E5%BA%AD%E4%BF%9D%E6%B4%81&channel=rykj'
      },
      {
        name: '上门维修',
        iconUrl: "https://img.daoway.cn/img/icon/circle/weixiu.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=36&title=%E4%B8%8A%E9%97%A8%E7%BB%B4%E4%BF%AE&channel=rykj'
      },
      {
        name: '上门按摩',
        iconUrl: "https://img.daoway.cn/img/icon/circle/anmo.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=22&title=%E4%B8%8A%E9%97%A8%E6%8C%89%E6%91%A9&channel=rykj'
      },
      {
        name: '家电清洗',
        iconUrl: "https://img.daoway.cn/img/icon/circle/qingxi.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=21&title=%E5%AE%B6%E7%94%B5%E6%B8%85%E6%B4%97&channel=rykj'
      },
      {
        name: '搬家拉货',
        iconUrl: "https://img.daoway.cn/img/icon/circle/remove.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=35&title=%E6%90%AC%E5%AE%B6%E6%8B%89%E8%B4%A7&channel=rykj'
      },
      {
        name: '衣物洗护',
        iconUrl: "https://img.daoway.cn/img/icon/circle/xiyi.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=26&title=%E8%A1%A3%E7%89%A9%E6%B4%97%E6%8A%A4&channel=rykj'
      },
      {
        name: '上门安装',
        iconUrl: "https://img.daoway.cn/img/icon/circle/anzhuang.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=150&title=%E4%B8%8A%E9%97%A8%E5%AE%89%E8%A3%85&channel=rykj'
      },
      {
        name: '保姆月嫂',
        iconUrl: "https://img.daoway.cn/img/icon/circle/baomu.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=70&title=%E4%BF%9D%E5%A7%86%E6%9C%88%E5%AB%82&channel=rykj'
      },
      {
        name: '康养护理',
        iconUrl: "https://img.daoway.cn/img/icon/circle/ext/guahao.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=80&title=%E5%BA%B7%E5%85%BB%E6%8A%A4%E7%90%86&channel=rykj'
      },
      {
        name: '养车用车',
        iconUrl: "https://img.daoway.cn/img/icon/circle/yangche.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=60&title=%E5%85%BB%E8%BD%A6%E7%94%A8%E8%BD%A6&channel=rykj'
      }
    ]
    let ViewItem = [];
    tabList.map((item, index) => {
      ViewItem.push(
        <View className='tabs'
          onClick={() => {
            Taro.setStorageSync('url', item.url)
            Taro.navigateTo({
              url: '/pages/package-A/webview/index'
            })
          }}>
          <Image className='img' src={item.iconUrl} />
          <Text className='title'>
            {item.name}
          </Text>
        </View>
      )
    });
    return ViewItem;
  }

  render() {
    let {
      main,
      actions: { action },
    } = this.props;
    return (
      <View className="PageHomepageNav">
        {this.renderToolsBox()}
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
